<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/forgetPwd.css">
    <link rel="stylesheet" href="/plugins/layui/extend/steps/style.css">
    <style>a{TEXT-DECORATION:none}</style>
</head>
<body>
<div class="login">
     <div class="logoHeader">
       <div class="LH_1"><img src="/css/img/hicar.png" alt="logo"><span>找回密码</span></div>
         <div class="LH_2"><a href="/login"><span class="signUp">登录</span></a><a href="/register"><span>注册</span></div></a>
    </div>
    <div class="container">
    <div class="getCode">找回密码登录</div>
        <div id="step_demo" class="step-body">
            <div class="step-header" style="width:80%;overflow: hidden;">
                <ul>
                    <li>
                        <span class="step-name">填写用户名</span>
                    </li>
                    <li>
                        <span class="step-name">验证身份</span>
                    </li>
                    <li>
                        <span class="step-name">设置新密码</span>
                    </li>
                    <li>
                        <span class="step-name">完成</span>

                    </li>


                </ul>
            </div>
            <div class="step-content">
                <div class="step-list">
                    <div class="information">
                        <form action="" class="formSubmit">
                            <div><input type="text" placeholder="请输入您的用户名" class="check" id="phoneInput"></div>
                           <!-- <div><input type="text" placeholder="验证码" class="check whiteCode"><input type="text" class="getCode1" placeholder=""></div>-->
                            <div><input type="button" value="下一步" class="btn_next submit_1"></div>
                        </form>
                    </div>

                </div>
                <div class="step-list">
                    <div class="information">
                        <form action="" class="formSubmit">
                            <div class='hasInput'><span>已验证手机号:</span><span id="validPhone"></span></div>
                            <div><input type="text" placeholder="请输入手机验证码" class='inputCode'><button id="j_getVerifyCode" type="button" class='getAutoCode'/>获取验证码</div>
                            <div><input type="button" value="下一步" class="btn_next submit_2"></div>
                        </form>
                    </div>
                </div>
                <div class="step-list">
                    <div class="information">
                        <form action="" class="formSubmit">
                            <div><input type="text" placeholder="新登录密码" id="newPass"></div>
                          <div><input type="text" placeholder="重复登录密码" id="oldPass"></div>
                          <div><input type="button" value="提交修改" class="btn_next submit_3"></div>
                        </form>
                    </div>

                </div>
                <div class="step-list">

                    <div class="information">
                        <form action="" class="formSubmit">
                            <div>~恭喜~，您的密码修改成功请重新登录</div>
                        </form>
                    </div>
                </div>

            </div>

        </div>
</div>
</div>
<script src="/js/jquery-1.11.2.min.js"></script>
<script src="/layer/layer.js"></script>
<script src="js/TimerButton.js"></script>
<script src="/plugins/layui/layui.js"></script>
<!--<script src="/plugins/layui/extend/steps/steps.js"></script>-->
<script>
    layui.config({
        base: '/plugins/layui/extend/steps/'
    }).extend({
        steps:"steps"
    }).use(['jquery', 'steps'], function() {

        var $ = layui.$;

        var $step = $("#step_demo").step();
        var phone="";
        var username_="";
        var forget_token="";
        /*  $("#preBtn").click(function(event) {
            $step.preStep();//上一步
        });
        $("#nextBtn").click(function(event) {
            $step.nextStep();//下一步
        });
        $("#goBtn").click(function(event) {
            $step.goStep(3);//到指定步
        });*/

        var btn = $("#j_getVerifyCode");
        timerButton.verify("#j_getVerifyCode", {
            time: 60,//倒计时时间
            event: "click",//事件触发方式
            //执行条件，可以是function也可以是Boolean值，如果是函数则需返回true才会执行
            condition: function () {
                var switchs=false;
                $.ajax({
                    url: "/registers/sendVerifyCode",
                    data: {
                        "username":username_,
                        "manner":2
                    },
                    type: "POST",
                    async: false,
                    success: function (data) {
                        if(data.status==1){
                            forget_token=data.forget_token;
                            layer.msg("验证码发送成功");
                            switchs=true;
                        }else{
                            layer.msg("验证码发送失败");
                            switchs=false;
                        }
                    },
                    error:function (data){
                        console.log(data);
                    }
                });
                return switchs;
            },
            unableClass: "disabled",//按钮不能使用时的class
            runningText: " s后重新获取",//计时正在进行中时按钮显示的文字
            timeUpText: "重新获取",//时间到了时按钮显示的文字
            progress: function (time) {//计时正在进行中时的回调
                btn.attr("disabled",true);
                btn.text(time + " s后重新获取");
                console.log(this);//这里的this指向按钮
                console.log(this.timedown);//这个timedown就是计时器
            },
            timeUp: function (time) {//计时结束时执行的回调
                btn.attr("disabled",false);
                btn.text("重新获取");
                console.log("时间到了！");
                console.log(this);//这里的this指向按钮
            },
            abort: function () {//中断计时
                btn.text("重新获取");
                console.log("我被中断了！");
                console.log(this);//这里的this指向按钮
            },
            eventFn: function () {//事件执行后的回调
                console.log("执行了");
                console.log(this);//这里的this指向按钮
            }
        });
        //中断计时
        $("#abort_btn").on("click", function (){
            document.getElementById("j_getVerifyCode").timedown.abort();
        });

        $(".submit_2").on("click", function () {
            var vcode=$(".inputCode").val();

            $.ajax({
                url: "/registers/checkVerifyCode.do",
                data: {
                    "username": username_,
                    "vcodes":vcode
                },
                type: "POST",
                async: false,
                dataType: "json",
                success: function (data) {
                    if (data.code == 2000) {
                        $step.nextStep();
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function (data) {
                    layer.alert("请求错误");
                }
            });
        })

        $(".submit_3").on("click", function () {
            var newPass=$("#newPass").val();
            var oldPass=$("#oldPass").val();
            if(newPass != oldPass){
                layer.msg("两次输入的密码不一致");
                return;
            }

            $.ajax({
                url: "/registers/resetPassWord.do",
                data: {
                    "username": username_,
                    "newPassword":newPass,
                    "forgetToken":forget_token,
                },
                type: "POST",
                async: false,
                dataType: "json",
                success: function (data) {
                    if (data.code == 2000) {
                        $step.goStep(4);//到指定步
                    } else {
                        layer.msg(data.msg);

                    }
                },
                error: function (data) {
                    layer.alert("请求错误");
                }
            });
        })

        $(".submit_1").on("click", function () {
            //Ajax验证
            var username = $("#phoneInput").val();
            var switchs = false;
            var phone = "";
            if (username == "") {
                layer.tips('请输入用户名', '#phoneInput', {
                    tips: [2, '#f95d68']
                });
                return;
            } else {
                $.ajax({
                    url: "/registers/isUsernameValid",
                    data: {
                        "username": username
                    },
                    type: "POST",
                    async: false,
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 2000) {
                            switchs = true;
                            phone = data.phone;
                            username_=data.username;
                            $("#validPhone").text(phone);
                            $step.nextStep();
                        } else {
                            layer.tips('您输入的账号名不存在，请核对后重新输入', '#phoneInput', {
                                tips: [2, '#f95d68']
                            });

                            switchs = false;
                            return;
                        }
                    },
                    error: function (data) {
                        layer.alert("请求错误");

                        switchs = false;
                    }
                });
            }
        });
    });

</script>

<script>
$(function(){
    var htmlStr="";
    var getStyle=function(a,b){
        a.css({"width":"16px", "height":"16px","line-height":"16px"}).html("√");
        b.css({"width":"20px", "height":"20px","line-height":"20px","font-size":"14px","background-color":"rgb(87,133,219)"});
    };
})
</script>
</body>
</html>